<template>
  <div class="nav">
    <div :class="store.tabkey == item.id ? 'item active' : 'item'" v-for="item in tabList" :key="item.id"
      @click="onChange(item)">
      <i :class="`iconfont ${item.icon}`"></i>
      <span>{{ item.text }}</span>
    </div>
  </div>
  <RouterView />
</template>
<script setup>
import { useRouter, useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';
import { isWeiXin } from "../../utlis/tools"
import { useStore } from "@/store"
import wx from "weixin-webview-jssdk";

const store = useStore();
const router = useRouter()
const iswx = ref(isWeiXin())
const tabList = [
  { id: 1, text: "首页", icon: "icon-shouye", path: "/home" },
  { id: 2, text: "购物车", icon: "icon-gouwuche", path: "/buycar" },
  { id: 3, text: "我的", icon: "icon-31wode", path: "/me" },
]
onMounted(() => {
  let tabKey = sessionStorage.getItem("tabKey")
  if (tabKey) {
    store.tabkey = tabKey
  }
  // wx.miniProgram.postMessage({
  //   data: {
  //     qwew: 123,
  //     cb: (res) => {
  //       console.log(res);
  //     }
  //   }
  // });
  // getWxFn()
})
const onChange = (item) => {
  sessionStorage.setItem("tabKey", item.id)
  store.tabkey = item.id
  router.push(item.path)
}
const getWxFn = () => {
  let str = window.location.hash.split("?")[1].split("=")[1]
  console.log(str);
  let data = decodeURI(str)
  encodeURI
  console.log(48, data);
}
</script>
<style lang="less" scoped>
.nav {
  border-top: 1px solid #eee;
  font-weight: 300;
  width: 100%;
  height: 60px;
  position: fixed;
  left: 0;
  bottom: 0px;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  z-index: 10;

  .item {
    width: 80px;
    color: #666;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .active {
    color: #1989fa;
  }

  .iconfont {
    font-size: 26px;
    padding-top: 8px;
  }

}
</style>
